<template>
  <footer class="todi-filter">
    <div>{{ left }} item left</div>
    <ul style="background: green">
      <li
        v-for="(filter, i) in filters"
        :key="i"
        :class="{ active: filter === f }"
        @click="$emit('change-filter', filter)"
      >
        {{ filter }}
      </li>
    </ul>
    <div @click="$emit('clear')">clear all complated</div>

    <BaseButton />
    <BaseInput />
  </footer>
</template>

<script>
export default {
  props: {
    left: Number,
    f: String,
  },
  data: function () {
    return {
      filters: ["All", "Active", "Complated"],
    };
  },
};
</script>


<style scoped>
.active {
  color: red;
}
</style>